<template>
  <van-row>
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="$emit('close')"
    />
    <van-form @submit="doSubmit">
      <van-field
        v-model="submitForm.employeeName"
        label="员工名称"
        placeholder="(必填)员工名称"
        :rules="[{ required: true, message: '请填写员工名称' }]"
        input-align="left"
      />
      <van-field
        v-model="submitForm.phoneNum"
        label="手机号"
        placeholder="请填写手机号"
        input-align="left"
      />
      <van-field
        v-model="submitForm.idNo"
        label="身份证号码"
        placeholder="请输入身份证号码"
        input-align="left"
      />
      <dict-select
        v-model="submitForm.sex"
        label="性别"
        dict-key="sex"
        placeholder="请选择性别"
        :required="false"
      />
      <van-field
        readonly
        clickable
        :value="submitForm.birthDay"
        label="出生日期"
        placeholder="点击选择出生日期"
        input-align="left"
        @click="showBirthDayPicker = true"
      />
      <dict-select
        v-model="submitForm.positionState"
        label="职位状态"
        dict-key="position_state"
        placeholder="请选择职位状态"
      />
      <van-field
        v-model="submitForm.emergencyContactName"
        label="紧急联系人"
        placeholder="请输入紧急联系人"
        input-align="left"
      />
      <van-field
        v-model="submitForm.emergencyContactNum"
        label="紧急联系号码"
        placeholder="请输入紧急联系人号码"
        input-align="left"
      />
      <van-field
        v-model="submitForm.bankCardNo"
        label="银行卡号"
        placeholder="请输入银行卡号"
        input-align="left"
      />
      <van-field
        v-model="submitForm.openingBank"
        label="银行卡开户行"
        placeholder="请输入银行卡开户行"
        input-align="left"
      />
      <van-field
          v-model="submitForm.homeAddress"
          rows="2"
          autosize
          label="家庭住址"
          type="textarea"
          maxlength="100"
          show-word-limit
          placeholder="请输入家庭住址"
          input-align="left"
      />
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-calendar v-model="showBirthDayPicker" :min-date="minDate" :show-confirm="false" @confirm="onConfirmOutputDate" />
  </van-row>
</template>

<script>
import { updateEmployee, selectEmployeeById, saveEmployee } from '@/api/employee'
import DictSelect from '@/components/dictSelect.vue'
import moment from 'moment/moment'
import Moment from 'moment'

export default {
  name: 'EmployeeSubmitModule',
  components: { DictSelect },
  data() {
    return {
      showBirthDayPicker: false,
      title: '',
      submitForm: {},
      minDate: moment(new Date()).subtract(30, 'years').toDate()
    }
  },
  methods: {
    init(id) {
      this.resetForm()
      this.title = '修改员工'
      if (!id) {
        this.title = '新增员工'
        return
      }
      selectEmployeeById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
        }
      })
    },
    resetForm() {
      this.submitForm = {
        id: '',
        state: '1'
      }
    },
    onConfirmOutputDate(row) {
      this.submitForm.birthDay = Moment(row).format('YYYY-MM-DD')
      this.showBirthDayPicker = false
    },
    doSubmit() {
      let request = saveEmployee
      if (this.submitForm.id) {
        request = updateEmployee
      }
      request(this.submitForm).then(resp => {
        if (resp.success) {
          this.$toast.success('操作成功')
          this.$emit('close')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
